<template>
	<view class="main">
		<view class="card box box-tb" v-for="(item,i) in classList" :key="i">
			<view class="card-top box box-pack-between">
				<view class="box box-pack-start box-align-center">
					<view class="icon mr10"></view>
					<view class="box box-tb box-pack-start box-align-start ml10">
						<view class="class-name">
							{{item.bjmc}}
						</view>
						<view class="class-info box box-pack-around mt10" @click="goClassInfo(item.id)">
							<u-image src="@/static/home/icon_stu.png" width="29rpx" height="24rpx"><u-loading slot="loading"></u-loading></u-image>
							 {{item.stuNum}}人
							 <u-button type="primary" open-type="share" :custom-style="customStyle">邀请</u-button>
						</view>
					</view>
				</view>
				
				<view class="btn box box-align-center" @click="changeClass(item)">
					<u-image src="@/static/home/icon_change.png" width="27rpx" height="27rpx"><u-loading slot="loading"></u-loading></u-image>
				</view>
			</view>
			<!-- <view class="card-bottom box box-pack-between box-align-center">
				<view class="box box-align-center">
					课程任务
					<view class="num">
						{{item.cousTaskNum==null?0:item.cousTaskNum}}
					</view>
				</view>
				<view class="posr box box-align-center">
					实践任务
					<view class="num">
						{{item.ldsjNum==null?0:item.ldsjNum}}
					</view>
					<view class="tips" v-if="item.nojudge>0">
						未批阅 +{{item.ldsjDkNum}}
					</view>
				</view>
			</view> -->
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:uni.getStorageSync("user"),
				currSchool:uni.getStorageSync('currSchool'),
				classList:[],
				customStyle: {
					width: '75px',
					height: '34px',
					lineHeight: '45rpx',
					backGround: '#7686F6',
					borderRadius: '26rpx',
					padding:'10rpx 20rpx',
					marginLeft:'30rpx',
					position:'absolute',
					right:'20px'
				},
				invite_cnt:'',//邀请学校人数
			}
		},
		onLoad() {
			this.getClassList();
			this.getschooltrs();
		},
		onShareAppMessage(res) {
			wx.vibrateShort();
			return {
					title: '邀请您加入【'+this.user.schoolName+'】,已有'+this.invite_cnt+'人加入~', 
					path: '/team/tr/invite?schoolid=' + this.schoolid + '&userid=' + this.user.id+
					     '&schoolname='+this.currSchool.name+'&trname='+this.user.name+'&icon='+this.user.icon,
					imageUrl: 'https://yh-sys.oss-cn-beijing.aliyuncs.com/2AA82D3CF32F47D0BBFBC6037E73D503join.png?Expires=4792987242&OSSAccessKeyId=LTAI4GL8SwAiLh3sSPXDS7z9&Signature=skoxCO1pZ1kn3DJIiBTnGM%2FO2oY%3D'
			}
		},
		methods: {
			getClassList(){
				this.$api.post({url:'/dclass/trClassList'}, { trid: this.user.id }).then(res => {
					this.classList = res.list;
				})
			},
			goClassInfo(id) {
				wx.vibrateShort();
				uni.navigateTo({ url:"/pageHome/classInfo?id="+id })
			},
			changeClass(classInfo){
				wx.vibrateShort();
				uni.setStorageSync("clazz",classInfo)
				uni.reLaunch({ url:"/pages/home/home" })
			},
			getschooltrs(){
				this.$api.post({url: '/dteacher/getschooltrs'}, {schoolid:this.currSchool.id}).then(res => {
					this.invite_cnt=res.cnt;
				})
			},
	
		}
	}
</script>

<style scoped lang="scss">
	.card{
		padding: 35rpx;
		margin-bottom: 20rpx;
		height: 230rpx;
		background-color: #fff;
		box-shadow: 0px 23rpx 46rpx 0px rgba(205, 207, 230, 0.18);
		border-radius: 30rpx;
		.card-top{
			height: 180rpx;
			box-sizing: border-box;
			// border-bottom: 2rpx solid #F0F1F8;
			
			.class-name {
				font-size: 38rpx;
				font-weight: 600;
			}
			
			.class-info {
				width: 124rpx;
				height: 34rpx;
				border-radius: 10px;
				color: #6E73D8;
				font-size: 26rpx;
			}
			
			.btn{
				width: 30rpx;
				height: 26rpx;
				line-height: 26rpx;
				color: #626BF1;
			}
		
		}
		
		.card-bottom{
			height: 150rpx;
			padding-left: 50px;
			padding-right: 50px;
			
			.num {
				margin-left: 5px;
				font-size: 48rpx;
			}
			.posr {
				position: relative;
				
				.tips {
					position: absolute;
					top: -36rpx;
					right:-130rpx;
					width: 140rpx;
					height: 40rpx;
					line-height: 40rpx;
					background: #FF5A77;
					border-radius: 26rpx;
					font-size: 20rpx;
					text-align: center;
					color: #fff;
				}
			}
		}
	}
	.icon {
		width: 14rpx;
		height: 128rpx;
		background: #8A8DF3;
		box-shadow: 4rpx 1rpx 13rpx 0px #626BF1;
		border-radius: 7rpx;
	}
</style>
